<script setup>
import { BorderBox1 as DvBorderBox1 } from '@kjgl77/datav-vue3'
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

// 定义响应式数据
const sensorData = ref([]);
const loading = ref(true);  // 加载状态

// 获取传感器数据
const getAllData = async () => {
  try {
    const response = await axios.post('http://localhost:8085/sensor/get-data');
    sensorData.value = response.data;
  } catch (error) {
    console.error('获取传感器数据失败:', error);
  } finally {
    loading.value = false;
  }
}

// 辅助函数，用于获取传感器数据或默认值
const getSensorValue = (id, defaultValue = 0) => {
  const data = sensorData.value.find(item => item.id === id);
  return data ? data.value : defaultValue;
}

// 在组件挂载后发起请求
// 在组件挂载后发起请求，并设置定时任务
let intervalId;
onMounted(() => {
  getAllData();
  intervalId = setInterval(() => {
    getAllData();
  }, 3600000); // 每小时（3600000毫秒）获取一次数据
});

// 在组件卸载时清除定时任务
onUnmounted(() => {
  clearInterval(intervalId);
});

</script>

<template>
    <dv-border-box1 class="box1">
      <dv-decoration7 style="margin-top: 5px;width: 100%;height: 5%;">
          实时数据
      </dv-decoration7>
      <div class="box1_a" v-if="!loading">
        <dv-border-box12 class="box1_a1">
          <div class="box1_a11">
            <h3>土壤指标</h3>
          </div>

          <div class="box1_a12">
            <div class="box1_a121">
              <dv-decoration-9 style="width:60px;height:60px;">
                <div>
                  {{ getSensorValue('327061586065758005') }}
                </div>
              </dv-decoration-9>
              <p style="font-size: 12px;margin-top: 3px">含水率</p>
              <p style="font-size: 10px">(%)</p>
            </div>
            <div class="box1_a121">
              <dv-decoration-9 style="width:60px;height:60px;">
                <div>
                  {{ getSensorValue('327061586065758015') }}
                </div>
              </dv-decoration-9>
              <p style="font-size: 12px;margin-top: 3px">温度</p>
              <p style="font-size: 10px">(℃)</p>
            </div>
            <div class="box1_a121">
              <dv-decoration-9 style="width:60px;height:60px;">
                <div>
                  {{ getSensorValue('327061586065758008') }}
                </div>
              </dv-decoration-9>
              <p style="font-size: 12px;margin-top: 3px">氮含量</p>
              <p style="font-size: 10px">(mg/kg)</p>
            </div>
          </div>
        </dv-border-box12>

        <dv-border-box12 class="box1_a2">
          <div class="box1_a21">
            <h3>空气指标</h3>
          </div>
          <div class="box1_a22">
            <div class="box1_a221">
              <dv-decoration-9 style="width:60px;height:60px;">
                <div>
                  {{ getSensorValue('327061586065758011') }}
                </div>
              </dv-decoration-9>
              <p style="font-size: 12px;margin-top: 3px">二氧化碳</p>
              <p style="font-size: 10px">(ppm)</p>
            </div>
            <div class="box1_a221">
              <dv-decoration-9 style="width:60px;height:60px;">
                <div>
                  {{ getSensorValue('327061586065758013')/10 }}
                </div>
              </dv-decoration-9>
              <p style="font-size: 12px;margin-top: 3px">温度</p>
              <p style="font-size: 10px">(℃)</p>
            </div>
          </div>
        </dv-border-box12>
      </div>
    </dv-border-box1>
</template>

<style scoped>
.box1_a{
  margin-top: 8px;
  display: flex;
}
.box1_a1{
  margin-top: 5px;
  margin-left: 10px;
  width: 250px;
  height: 150px;
}
.box1_a11{
  width: 100%;
  height: 20px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box1_a12{
  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.box1_a121{
  width: 70px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box1_a2{
  margin-top: 5px;
  margin-left: 5px;
  width: 170px;
  height: 150px;
}
.box1_a21{
  width: 100%;
  height: 20px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box1_a22{
  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.box1_a221{
  width: 70px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>